<template>
  <Row>
    <Row>
      <Menu mode="horizontal" active-name="1" @on-select="route">
        <MenuItem name="DeptList">
          <Icon type="ios-paper"/>部门管理
        </MenuItem>
        <MenuItem name="UserList">
          <Icon type="ios-people"/>用户管理
        </MenuItem>
        <Button
          icon="ios-download-outline"
          type="primary"
          style="float:right; margin:10px"
          @click="logout"
        >登出</Button>
      </Menu>
    </Row>
    <Row style="margin-top:50px">
      <Col span="8" offset="8">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="部门名称" prop="deptName">
            <Input v-model="formValidate.deptName" placeholder="请输入部门名称"></Input>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button @click="back()" style="margin-left: 8px">返回</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Row>
</template>
<script>
/* eslint-disable */
import userService from "@/service/userService";
import deptService from "@/service/deptService";

export default {
  data() {
    return {
      depts: [],
      roles: [
        { roleId: 1, roleName: "管理员" },
        { roleId: 2, roleName: "普通用户" }
      ],
      formValidate: {
        deptId: "",
        deptName: ""
      },
      ruleValidate: {
        deptName: [
          {
            required: true,
            message: "部门名称不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = {
            deptId: this.formValidate.deptId,
            deptName: this.formValidate.deptName,
            session: localStorage.getItem("session")
          };
          deptService
            .edit(data)
            .then(data => {
              if (data && data.code == 0) {
                this.$Message.success("更新成功!");
                this.$router.push("DeptList");
              }
            })
            .catch(e => {
              console.log(e);
            });
        } else {
          this.$Message.error("请填写完整!");
        }
      });
    },
    back(name) {
      this.$router.go(-1);
    },
    route(name) {
      this.$router.push(name);
    },
    deptList() {
      let data = {
        session: localStorage.getItem("session")
      };
      deptService
        .list(data)
        .then(data => {
          if (data && data.code == 0) {
            this.depts = data.data;
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    logout() {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>是否确认登出</p>",
        onOk: () => {
          let data = {
            session: localStorage.getItem("session")
          };
          userService
            .logout(data)
            .then(data => {
              if (data && data.code == 0) {
                localStorage.removeItem("session");
                this.$router.push("/");
              }
            })
            .catch(e => {
              console.log(e);
            });
        }
      });
    }
  },
  mounted() {
    this.deptList();
    this.formValidate = this.$route.params;
  }
};
</script>
